<template>
  <el-container class="main_con">
    <div class="receipt">
      <div class="preview"><invoicePreview :obj="obj"></invoicePreview></div>

      <div class="content">
        <div class="setting">
          <el-form size="medium" label-width="100px" ref="itemForm" :model="obj" :rules="itemRules" class="edit_form" style="width:100%">
            <div class="header">模板信息</div>

            <el-form-item label="模板名称" prop="name"><el-input v-model="obj.name" placeholder="请输入模板名称" style="width:300px;"></el-input></el-form-item>

            <div class="header">展示内容</div>
            <el-form-item label="标题" prop="title"><el-input style="width: 300px;" v-model="obj.title"></el-input></el-form-item>
            <el-form-item prop="express_id" label="快递公司">
              <el-select v-model="obj.express_id"><el-option v-for="item in expresslist" :key="item.id" :label="item.name" :value="item.id"></el-option></el-select>
            </el-form-item>
            <el-form-item label="logo">
              <div style="width: 100px;height: 100px;"><upload :tempUrl="obj.logo" @input="getimg"></upload></div>
            </el-form-item>
            <div class="items">
              <table cellspacing="0" cellpadding="0" width="100%">
                <tr>
                  <td>发货单信息</td>
                  <td>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.invoice.title" :disabled="false">发货单标题</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.invoice.invoice_no">发货单编号</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.invoice.create_time">打印时间</el-checkbox>
                  </td>
                </tr>
                <tr>
                  <td>订单信息</td>
                  <td>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.order.order_no">订单编号</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.order.pay_type">支付类型</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.order.create_time">下单时间</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.order.pay_time">付款时间</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.order.receiving_time">收货时间</el-checkbox>
                  </td>
                </tr>
                <tr>
                  <td>收货人信息</td>
                  <td>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.receiving.user_name">收货人姓名</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.receiving.mobile">收货人号码</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.receiving.address">收货人地址</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.receiving.info">收货人备注信息</el-checkbox>
                  </td>
                </tr>

                <tr>
                  <td>商品信息</td>
                  <td>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.goods.serial">商品序号</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.goods.name">商品名称</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.goods.aftr">商品规格</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.goods.number">商品数量</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.goods.amount">商品总价</el-checkbox>
                  </td>
                </tr>

                <tr>
                  <td>商品信息</td>
                  <td>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.fee.subtotal">商品小计</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.fee.freight">运费</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.fee.discount">折扣</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.fee.amount">支付价格</el-checkbox>
                    <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="obj.config.fee.number">数量</el-checkbox>
                  </td>
                </tr>
              </table>

              <div style="margin-top:20px;">
                <el-form-item label="二维码内容">
                  <el-input v-model="obj.config.qrcode.content" size="mini" placeholder="二维码内容" style="width:300px;margin-right:20px"></el-input>
                </el-form-item>
                <el-form-item label="底部内容">
                  <el-input v-model="obj.config.qrcode.bottom" placeholder="请输入小票底部内容" type="textarea" rows="3" style="width:300px;"></el-input>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>
        <div class="btns"><el-button v-has type="primary" @click="saveData">保存设置</el-button></div>
      </div>
    </div>
  </el-container>
</template>

<script>
import invoicePreview from './components/invoicePreview';
import {addinvoice, editinvoice, getinvoicedetial} from '@/api/shop/print';
import {objCopy} from '@/utils/index';
import {getexpress} from '@/api/shop/freight';
import upload from '@/components/Upload/SingleImage2';
import {mapState} from 'vuex';
import {mapGetters} from 'vuex';
export default {
  data() {
    return {
      checked: false,
      mt: 1,
      pw: 1,
      pageIsEdit: 0, //0->新增,1->编辑,2->通过申请
      pageName: '新增模板',
      isLoading: false,
      qrcode: '',
      expresslist: [],
      url: 'https://www.jingzhe365.com/',
      obj: {
        name: '',
        title: '',
        logo: '',
        express_id: '',
        config: {
          invoice: {
            slide: 1, //
            title: 1, //
            invoice_no: 1, //
            create_time: 1 //
          },
          order: {
            slide: 1, //
            order_no: 1, //
            name: 1, //
            pay_type: 1, //
            create_time: 1, //
            pay_time: 1, //
            order_type: 1 //
          },

          receiving: {
            slide: 1, //	int	收货人信息是否显示	0,1
            name: 1, //int	收货人姓名是否显示	0,1
            mobile: 1, //	int	收货人号码是否显示	0,1
            address: 1, //	int	收货人地址是否显示	0,1
            info: 1 //int	收货人备注信息是否显示	0,1
          },

          goods: {
            slide: 1, //int	商品信息是否显示	0,1
            serial: 1, //	int	商品序号是否显示	0,1
            name: 1, //	int	商品名称是否显示	0,1
            aftr: 1, //int	商品规格是否显示	0,1
            number: 1, //	int	商品数量是否显示	0,1
            amount: 1 //	int	商品总价是否显示	0,1
          }, //json	商品信息

          fee: {
            slide: 1, //	int	费用信息是否显示	0,1
            subtotal: 1, //	int	商品小计是否显示	0,1
            freight: 1, //	int	运费是否显示	0,1
            discount: 1, //	int	折扣是否显示	0,1
            amount: 1, //	int	支付价格是否显示	0,1
            number: 1 //	int	数量是否显示	0,1
          }, //json	费用信息

          qrcode: {
            slide: 1, ////	int	二维码板块是否显示	0,1
            content: '', //	string	二维码内容	0,字符串(内容)
            bottom: '' //
          }
        }
      },
      itemRules: {
        name: [
          {
            required: true,
            message: '模板名称必须填写'
          }
        ],
        title: [
          {
            required: true,
            message: '模板标题必须填写'
          }
        ],
        express_id: [
          {
            required: true,
            message: '请选择快递公司'
          }
        ]
      }
    };
  },
  components: {
    invoicePreview,
    upload
  },
  computed: {
    ...mapGetters(['picurl'])
  },
  created() {
    this.getexpress();
    //获取路由参数(编辑时使用)
    if (this.$route.query.id) {
      //编辑页面
      this.pageIsEdit = 1;
      this.pageName = '编辑模板';
      this.$route.meta.title = '编辑模板';
      this.getTemplate(this.$route.query.id);
    } else {
      this.pageIsEdit = 0;
      this.pageName = '新增模板';
      this.$route.meta.title = '新增模板';
    }
  },
  methods: {
    getimg(e) {
      if (e) {
        var url = e;
        let image = new Image();
        let that = this;
        image.crossOrigin = '';
        if (url.indexOf('http') == -1) {
          url = this.picurl +'/' +url;
        }
        debugger
        console.log(url)
         that.obj.logo=url
        // image.src = url;
        // image.onload = function() {
        //   let base64 = that.getBase64Image(image);
        //   that.obj.logo = base64;
        // };
      } else {
        that.obj.logo = '';
      }
    },
    getBase64Image(img) {
      var canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase();
      var dataURL = canvas.toDataURL('image/' + ext);
      return dataURL;
    },

    getexpress() {
      let data = {};
      getexpress(data).then(res => {
        this.expresslist = res.msg;
      });
    },
    getTemplate(id) {
      this.isLoading = true;
      getinvoicedetial(id)
        .then(res => {
          this.isLoading = false;
          let o = res.msg;

          // //赋值
          // this.obj.id = o.id;
          // this.obj.name = o.name;

          // if (i.shop.qrcode != 0) {
          //   this.qrcode = i.shop.qrcode;
          //   i.shop.qrcode = 1;
          // }
          this.obj = o;
        })
        .catch(e => {
          this.isLoading = false;
        });
    },
    //保存数据
    saveData() {
      this.$refs.itemForm.validate(valid => {
        if (valid) {
          //处理数据
          let x = {...this.obj};
          // if (x.config.shop.qrcode == 1) {
          //   x.config.shop.qrcode = this.qrcode;
          // }
          if (x.config.qrcode.content == '') {
            x.config.qrcode.content = 0;
          }
          if (x.config.qrcode.bottom == '') {
            x.config.qrcode.bottom = 0;
          }
          x.config = JSON.stringify(x.config);
          this.isLoading = true;
          if (this.pageIsEdit) {
            //编辑
            editinvoice(x, x.id)
              .then(res => {
                this.isLoading = false;
                this.$router.push('/print/template/invoice');
              })
              .catch(e => {
                this.isLoading = false;
              });
          } else {
            //新增
            addinvoice(x)
              .then(res => {
                this.isLoading = false;
                this.$router.push('/print/template/invoice');
              })
              .catch(e => {
                this.isLoading = false;
              });
          }
        } else {
          //console.log('error')
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}

.preview {
  height: calc(100vh - 130px);
  overflow-y: scroll;
  margin-right: 10px;
  width: 911px;
}

.receipt {
  display: flex;

  .content {
    background-color: #fff;
    flex-grow: 1;
    padding: 20px;
    padding-bottom: 0;

    .setting {
      height: calc(100vh - 190px);
      overflow-y: auto;

      .header {
        background-color: #e0e3e8;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        margin-bottom: 20px;
      }

      .items {
        table {
          border-collapse: collapse;
          font-size: 14px;

          tr {
            td {
              border: 1px solid #e0e3e8;
              height: 50px;
              line-height: 50px;
              padding-left: 20px;
            }
          }
        }
      }
    }

    .btns {
      height: 60px;
      line-height: 60px;
      box-sizing: border-box;
      border-top: 1px solid #dcdfe6;
    }
  }
}
</style>
